<template>
    <div class="page">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            size="default" status-icon>
            <el-form-item label="广告名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="广告位置" prop="type">
                <el-select v-model="ruleForm.type" placeholder="全部">
                    <el-option label="PC首页轮播" :value=0 />
                    <el-option label="APP首页轮播" :value=1 />
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间" required prop="startTime" :locale="zhCn">
                <div class="block">
                    <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期" />
                </div>
            </el-form-item>
            <el-form-item label="到期时间" required prop="endTime" :locale="zhCn">
                <div class="block">
                    <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期" />
                </div>
            </el-form-item>
            <el-form-item label="上线/下线" prop="status">
                <el-radio-group v-model="ruleForm.status">
                    <el-radio label="下线" :value=0 />
                    <el-radio label="上线" :value=1 />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item label="广告链接" prop="url">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
            <el-form-item label="广告备注" prop="note">
                <el-input v-model="ruleForm.note" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">
                    提交
                </el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { createAdvertiseAPI } from './api'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn'
import { useRouter } from "vue-router";
const router = useRouter()

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
    clickCount: 0,
    endTime: '',
    id: 0,
    name: '',
    note: '',
    orderCount: 0,
    pic: '',
    sort: 0,
    startTime: '',
    status: 0,
    type: 0,
    url: '',
})


const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入广告名称', trigger: 'blur' },
    ],
    startTime: [
        {
            required: true,
            message: '请选择开始时间',
            trigger: 'blur',
        },
    ],
    endTime: [
        {
            required: true,
            message: '请选择到期时间',
            trigger: 'blur',
        },
    ],
    url: [
        {
            required: true,
            message: '请输入广告链接',
            trigger: 'blur',
        },
    ]
})

const submitForm = () => {
    ElMessageBox.confirm("是否添加广告", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        createAdvertiseAPI(ruleForm.value).then((res: any) => {
            ElMessage.success("添加成功");
            router.back()
        })
    })
}

const resetForm = () => {

}
</script>
<style lang="less" scoped>
.page {
    width: 680px;
    height: 625px;
    // box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    margin: 0 auto;
}
</style>
